{% extends 'extends/nav_front_all_.html' %}

{% block main %}
<div class="container py-5 text-dark">

  <!-- 个人信息卡片 -->
  <div class="p-4 rounded-4 shadow-sm bg-white mb-4">

    <!-- 背景图区域 -->
    <div id="user-background" style="width: 100%; height: 50vh; background-size: cover; background-position: center; border: 3px solid #000; border-radius: 12px;"></div>

    <div class="d-flex align-items-center mt-4 flex-wrap">
      <!-- 头像 -->
      <img id="user-icon" class="border border-3 border-dark rounded-circle"
           style="width: 20vh; height: 20vh; object-fit: cover; object-position: center;">

      <!-- 用户标签区域 -->
      <div class="d-flex flex-column ms-4">
        <span class="badge bg-primary p-2 mb-2" id="user-username">用户名</span>
          <span class="badge bg-secondary p-2 mb-2" id="user-id">用户id</span>
        <span class="badge bg-secondary p-2 mb-2" id="user-role">角色</span>
        <span class="badge bg-danger p-2 mb-2" id="user-disable-until">账号正常</span>
      </div>

      <!-- 简介区域 -->
      <div class="alert alert-light ms-4 mb-0 flex-grow-1"
           id="user-intro"
           style="word-break: break-word; min-width: 200px;">
        这个人很懒，什么都没写
      </div>
    </div>

  </div>

  <!-- 帖子列表卡片 -->
  <div class="card">
    <div class="card-header">
      <h4>发布的帖子</h4>
    </div>
    <div class="card-body">
      <div class="container mt-4">
        <div class="row">
          <div class="col-md-12">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>帖子标题</th>
                  <th>分类</th>
                  <th>发布时间</th>
                  <th>查看</th>
                </tr>
              </thead>
              <tbody id="blogs-body">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    onUrlsReady(urls => {
        const apiUrl = {{ url|tojson }};

        Fetch(apiUrl, 'get', {}, res => {
            if (res.status === 'success') {
                const data = res.data;

                // 设置头像
                if (data.img_icon) {
                    Element_('user-icon').src = data.img_icon;
                }

                // 设置背景图
                if (data.img_background) {
                    Element_('user-background').style.backgroundImage = `url(${data.img_background})`;
                }

                // 设置个人信息
                Element_('user-username').textContent = data.username || '匿名用户';
                Element_('user-intro').textContent = data.intro || '这个人很懒，什么都没写';
                Element_('user-role').textContent = data.role || '未设置';
                Element_('user-id').textContent = data.uid || '未知id'
                Element_('user-disable-until').textContent =
                    data.disable_until ? `封禁至 ${data.disable_until}` : '账号正常';

                // 填充博客列表
                if (data.blogs && data.blogs.length > 0) {
                    data.blogs.forEach(blog => {
                        const post_url=urls.page.front.blogdetail.replace('0', blog.pid)
                        Element_('blogs-body').innerHTML += `
                          <tr>
                            <td>${blog.title}</td>
                            <td>${blog.sort}</td>
                            <td>${blog.time}</td>
                            <td><a href="${post_url}" class="btn btn-sm btn-primary">查看</a></td>
                          </tr>
                        `;
                    });
                } else {
                    Element_('blogs-body').innerHTML = `
                      <tr>
                        <td colspan="4" class="text-center text-muted">没有发布任何帖子</td>
                      </tr>
                    `;
                }
            }
        });
    });
});
</script>
{% endblock %}
